<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>题目集详情-[[${competitionDetail.competitionName}]]</title>
    <div th:replace="~{fragments/head-base}"></div>
    <!--Page level styles-->
    <!--heard script-->
</head>

<!--Page head script-->

<!--end of Page head script-->
<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-6">
                            <h4 class="nav_top_align">
                                <i class="fa fa-trophy mr-1"></i>
                                题目集详情
                            </h4>
                        </div>
                        <div class="col-6 ">
                            <ol class="breadcrumb float-right nav_breadcrumb_top_align">
                                <li class="breadcrumb-item">
                                    <a th:href="@{/}">
                                        <i class="fa fa-home" aria-hidden="true"></i> 首页
                                    </a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a th:href="@{/competition/competitionListPage}">
                                        题目集列表
                                    </a>
                                </li>
                                <li class="breadcrumb-item active">[[${competitionDetail.competitionName}]]</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">
                    <div class="row mt-3">
                        <div class="col-4">
                            <!--title-->
                            <div class="card">
                                <div class="card-header bg-white p-0">
                                    <img class="w-100" th:src="@{/img/competition-detail-logo.png}"/>
                                </div>
                                <div class="card-block">
                                    <h3 class=""><strong>[[${competitionDetail.competitionName}]]</strong></h3>
                                    <p><span id="registerCount">[[${competitionDetail.registerCount}]]</span> 人已经报名</p>
                                    <div class="mt-3">
                                        <div th:if="${competitionDetail.secret}">类型：私密赛</div>
                                        <div th:if="!${competitionDetail.secret}">类型：公开赛</div>
                                        <div>举办者：<a target="_blank"
                                                    th:href="@{'/user/mainPage?userId='+${competitionDetail.userId}}"
                                                    class="text-primary">[[${competitionDetail.name}]]</a></div>
                                        <div>题目集赛制：OI</div>
                                        <div>题目数量：[[${competitionDetail.problemCount}]]</div>
                                        <div>开始时间：[[${#dates.format(competitionDetail.startTime,'yyyy 年 M 月 d 日
                                            H:mm')}]]
                                        </div>
                                        <div>结束时间：[[${#dates.format(competitionDetail.endTime,'yyyy 年 M 月 d 日
                                            H:mm')}]]
                                        </div>
                                        <div>题目集时长：<span id="competitionTime"></span></div>

                                    </div>
                                    <div class="mt-3">
                                        <div class="col-12">
                                            <button disabled th:if="${competitionDetail.competitionStatus == 1 && competitionDetail.userRegistered}"
                                                    class="registerBtn btn  w-100 btn-primary button-rounded">
                                                你已成功报名
                                            </button>

                                            <button th:if="${!competitionDetail.userRegistered && competitionDetail.secret}"
                                                    onclick="clearPasswordModal()"
                                                    data-toggle="modal" data-target="#password-modal"
                                                    class="registerBtn btn w-100 btn-primary button-rounded">题目集报名
                                            </button>

                                            <button th:if="${!competitionDetail.userRegistered && !competitionDetail.secret}"
                                                    onclick="registerCompetition()"
                                                    class="registerBtn btn w-100 btn-primary button-rounded">题目集报名
                                            </button>

                                            <button onclick="gotoCompetitionProblemList()"
                                                    th:if="${competitionDetail.competitionStatus == 2}"
                                                    class="registerBtn btn w-100 btn-primary button-rounded">题目集已开始，进入题目集
                                            </button>
                                            <button onclick="gotoCompetitionProblemList()"
                                                    th:if="${competitionDetail.competitionStatus == 3}"
                                                    class="btn w-100 btn-primary button-rounded">题目集已结束，回顾题目集
                                            </button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--#title-->
                        </div>

                        <!--right-->
                        <div class="col-8 ">
                            <div class="card ">
                                <div class="card-block">
                                    <div class="row">
                                        <!-- <div class="col-12">
                                             [[${competitionDetail.title}]]
                                         </div>-->
                                        <div class="col-12 markdown-body" th:utext="${competitionDetail.htmlContent}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--#right-->
                        </div>


                    </div>
                </div>
            </div>
            <!-- /.inner -->
        </div>
        <!-- /.outer -->

        <!-- /#content -->
        <!-- Modal -->
        <div th:replace="~{fragments/modal}"></div>


        <div class="modal fade" id="password-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall"
             aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="modalLabelSmall">输入报名密码</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input class="w-100" maxlength="15" id = "competitionPassword" name = "competitionPassword" type="password" />
                    </div>
                    <div class="modal-footer">
                        <button class="btn  btn-secondary" data-dismiss="modal">取消</button>
                        <button class="btn  btn-primary" data-dismiss="modal" onclick="registerCompetitionByPassword()" >确定</button>
                    </div>
                </div>
            </div>
        </div>


        <!--#Modal-->

        <!--wrapper-->
        <!-- /#content -->

    </div>
    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/footer :: footer}"></div>

<!--end of global scripts-->

<script th:inline="javascript" type="text/javascript">
    /*<![CDATA[*/
    var startTime = [[${competitionDetail.startTime}]];
    var endTime = [[${competitionDetail.endTime}]];
    var compId = [[${competitionDetail.id}]];
    var competitionStatus = [[${competitionDetail.competitionStatus}]];
    var time = differDate2HourMinute(startTime, endTime);
    $("#competitionTime").html(time);

    if (competitionStatus == 4 || competitionStatus == 1) {
        var nowDate = new Date();
        var startDate = new Date(startTime);
        var timeLong = Math.abs(nowDate.getTime() - startDate.getTime());
        window.setTimeout('competitionStart()', timeLong);
    }
    if (competitionStatus == 2){
        var nowDate = new Date();
        var endDate = new Date(endTime);
        var timeLong = Math.abs(endDate.getTime() - nowDate.getTime());
        window.setTimeout('competitionClose()', timeLong);
    }


    //报名
    function registerCompetition() {
        $.post("competition/register", {"compId": compId}, function (resp) {
            if (resp.status == 200) {
                $.message({
                    message: "报名成功",
                    type: "success"
                });
                var $register = $(".registerBtn");
                $register.attr("disabled", "");
                $register.html("你已成功报名");
                var $registerCount = $("#registerCount");
                var presentCount = parseInt($registerCount.html()) + 1;
                $registerCount.html(presentCount);
            } else {
                $.message({
                    message: resp.msg,
                    type: "error"
                });
            }
        });
    }

    //密码报名
    function clearPasswordModal() {
        $("#competitionPassword").val("");
    }

    function registerCompetitionByPassword(){
        var password = $("#competitionPassword").val();
        $.post("competition/register", {"compId": compId,"password":password}, function (resp) {
            if (resp.status == 200) {
                $.message({
                    message: "报名成功",
                    type: "success"
                });
                var $register = $(".registerBtn");
                $register.attr("disabled", "");
                $register.html("你已成功报名");
                var $registerCount = $("#registerCount");
                var presentCount = parseInt($registerCount.html()) + 1;
                $registerCount.html(presentCount);
            } else {
                $.message({
                    message: resp.msg,
                    type: "error"
                });
            }
        });

    }


    function competitionStart() {
        var $register = $(".registerBtn");
        $register.removeAttr("disabled");
        $register.html("题目集已开始，进入题目集");
        $register.attr("onclick", "gotoCompetitionProblemList()");
    }


    function competitionClose() {
        var $processing = $(".processingBtn");
        $processing.html("题目集已结束，回顾题目集");
    }

    function gotoCompetitionProblemList() {
        $.post("competition/gotoCompetitionProblemList", function (resp) {
            if (resp.status == 200) {
                location.href = resp.data + "?compId=" + compId;
                return;
            } else {
                $.message({
                    message: resp.msg,
                    type: "error"
                })
            }
        })

    }

    /*]]>*/
</script>

</body>

</html>
